<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>劳保页面</title>
<link href="${pageContext.request.contextPath }/css/metro.css"rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/metro-schemes.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/metro-responsive.css"rel="stylesheet">
<script src="${pageContext.request.contextPath }/js/jquery-2.1.3.min.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.dataTables.min.js"></script>
<script src="${pageContext.request.contextPath }/js/metro.js"></script>

<script>
        function addRow(obj)
        {
        var table =document.getElementById("testTbl");
        var newTr = testTbl.insertRow();
        
        var newTd0 = newTr.insertCell();
        var newTd1 = newTr.insertCell();
        var newTd2 = newTr.insertCell();
        var newTd3 = newTr.insertCell();
        var newTd4 = newTr.insertCell();
        var newTd5 = newTr.insertCell();
        var newTd6 = newTr.insertCell();   
        var newTd7 = newTr.insertCell();
        var newTd8 = newTr.insertCell();
        var newTd9 = newTr.insertCell();
  
      
    
   		

        newTd0.innerHTML = '标准'+ (table.rows.length-2); 
        newTd1.innerHTML = '<input type="text" name="test2"    style="width:40px;" maxlength="5">'; 
        newTd2.innerHTML = '<input type="text" name="test3"    style="width:40px;" maxlength="5">';
        newTd3.innerHTML = '<input type="text" name="test4"    style="width:40px;" maxlength="5">'; 
        newTd4.innerHTML = '<input type="text" name="test5"    style="width:40px;" maxlength="5">'; 
        newTd5.innerHTML = '<input type="text" name="test6"    style="width:40px;" maxlength="5">'; 
        newTd6.innerHTML = '<input type="text" name="test7"    style="width:40px;" maxlength="5">'; 
        newTd7.innerHTML = '<input type="text" name="test8"    style="width:40px;" maxlength="5">';
        newTd8.innerHTML = '<input type="text" name="test9"    style="width:40px;" maxlength="5">'; 
      
        newTd9.innerHTML= '<input type="button" onclick="DelRowNew(this);" value="—">';
     
        
        }        
        function DelRowNew(r){
        var i=r.parentNode.parentNode.rowIndex;
        document.getElementById('testTbl').deleteRow(i);
        }
        function selectAll(checkbox) {
            $('input[type=checkbox]').prop('checked', $(checkbox).prop('checked'));
        }

    </script>
</head>

    <body>  
              <div class="accordion large-heading" data-role="accordion" >
                   <div class="frame">
                        <div class="heading">制定标准</div>
                            <div class="content">
                                  <table id="testTbl"  class="table striped hovered cell-hovered border bordered">
                                       <thead>
                                            <tr>
                    <th>标准\名称</th>
                    <th>毛巾</th>
                    <th>肥皂</th>
                    <th>肥皂粉</th>
                    <th>香皂</th>
                    <th>洗衣液</th>
                    <th>线手套</th>
                    <th>耳套</th>
                    <th>口罩</th>
                    <th>删除</th>
                   
                </tr>
                </thead>
                <tbody>
                <tr class="info">  
                </tr>
                </tbody>
            </table> 
                     <input id = "inputb" type="button" onclick="addRow(this);" value="+新增标准">
                                </div>
                            </div>
                            <div class="frame active">
                                <div class="heading">分配标准</div>
                                <div class="content">
             <table id="labourdistribution"  class="table striped hovered cell-hovered border bordered">
                <thead>
                <tr>
                    <th>部门</th>
                    <th>职位</th>
                    <th>分配标准</th>
                </tr>
                </thead>
                <tbody>
                <tr > 
                    <td>a</td>
                    
                    <td>  
                     <label><input name="Fruit" type="checkbox" value="" onclick="selectAll(this);"/>全选</label> 
                     <label><input name="Fruit" type="checkbox" value="" />苹果 </label> 
                     <label><input name="Fruit" type="checkbox" value="" />桃子 </label> 
                     <label><input name="Fruit" type="checkbox" value="" />香蕉 </label> 
                     <label><input name="Fruit" type="checkbox" value="" />梨 </label>
                    </td> 
                    <td>b</td>
                </tr>
                </tbody>
            </table> 
                                </div>
                            </div>
                            <div class="frame active">
                                <div class="heading">Item 4</div>
                                <div class="content">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute.
                                </div>
                            </div>
                            <div class="frame" id="f3">
                                <div class="heading">Item 3</div>
                                <div class="content">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                                </div>
                            </div>
                        </div>
   
    </body>

</html>

 